<template>
	<view class="integral">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'积分商城'"></Hearder>
		<!-- #endif -->
		<view class="content">
			<view class="limits_list">
				<view class="every clearfix" v-for="item in goodlist" :key="item.goods_id" @click="toPage('/pages/classify/goodsdet?id='+item.goods_id)">
					<image :src="item.goods_image"></image>
					<view class="every_right">
						<view class="title">{{item.goods_name}}</view>
						<view class="center">
							<view>商品价：￥<text>{{item.goods_min_line_price}}</text></view>
							<view>{{item.goods_sales}}人兑换</view>
						</view>
						<view class="every_bot">
							<text>{{item.goods_min_line_price}}积分兑换</text>
							<!-- <text v-if="item.goods_min_price!=0">+{{item.goods_min_price}}现金</text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="nidata" v-if="!goodlist.length">
				<image src="../../static/images/noimg.png" mode="widthFix"></image>
			</view>
			<!-- 底部加载提示 -->
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				page:1,
				last_page:1,
				goodlist:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
				max: 0,
				userinfo:{},
				showLogin:false
			}
		},
		onLoad() {
			this.page=1
			this.goodlist=[]
			this.getinit()
		},
		onShow() {
			this.request('/member/getMemberDetails').then(res => {
				if(res.data.code==-500){
					this.showLogin=true
				}
				if(res.data.code==1){
					this.userinfo=res.data.data
				}
			})
		},
		onUnload() {
			this.max = 0,
			this.goodlist = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.page = this.page + 1
			if (this.page > this.last_page) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/goods/getCategoryGoodsList',{category_id:1,page:this.page}).then(res => {
					if(res.data.code==1){
						this.goodlist=this.goodlist.concat(res.data.data.data)
						this.last_page=res.data.data.last_page
					}
				})
			},
			loginhidden(data){
				this.showLogin=data
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.integral{
		.limits_list{
			margin: 0 4%;
			.every{
				height: 260rpx;
				margin-top: 30rpx;
				image{
					float: left;
					width: 260rpx;
					height: 100%;
					border-radius: 10rpx;
				}
				.every_right{
					position: relative;
					float: left;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 280rpx);
					height: 100%;
					margin-left: 20rpx;
					.title{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp:2;
						/*! autoprefixer: off */
						-webkit-box-orient: vertical;
						/* autoprefixer: on */
						line-height: 40rpx;
						font-size: 32rpx;
						margin-top: 10rpx;
						height: 80rpx;
					}
					.center{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 30rpx;
						view{
							font-size: 24rpx;
							font-weight: 800;
							color: $uni-item-color;
							text{
								font-size: 24rpx;
								color: $uni-item-color;
							}
							&:last-of-type{
								color: #999;
								font-weight: 400;
							}
						}
					}
					.every_bot{
						width: 100%;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						border-radius: 35rpx;
						background: $uni-item-color;
						text{
							font-size: 28rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
